<template>
  <div class="left-container">
    <div class="flex" style="margin-bottom: 10px" v-px-to-vw>
      <div style="flex: 1; text-align: center; cursor: pointer;" :style="gradeStyle(0)" @click="tabGrade(0)">高一年级</div>
      <div style="flex: 1; text-align: center; cursor: pointer;" :style="gradeStyle(1)" @click="tabGrade(1)">高二年级</div>
      <div style="flex: 1; text-align: center; cursor: pointer;" :style="gradeStyle(2)" @click="tabGrade(2)">高三年级</div>
    </div>
    <div class="flex" style="width: 100%; height: 185px; margin-top: 6px; flex-wrap: wrap; overflow-y: auto;" v-px-to-vw>
      <div class="class-con" v-for="item in ref_class_stu_statistics" :key="item">
        <div class="class-name"><span style="display: inline-block; text-align: center; width: 40px;">{{ item.classname }}</span> <span style="margin-left: 12px;">{{ item.stucount }}人</span></div>
        <!-- <div>{{ item.stucount }}人</div> -->
      </div>
    </div>
    <div style="margin: 20px 0" v-px-to-vw>教师考勤</div>
    <div class="flex" style="height: 25%; flex-grow: 1; flex-shrink: 1">
      <div ref="pieChartRefA" class="chart-container" style="flex: 1"></div>
      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center">
        <div style="font-size: 20px; color: #00fff0; margin-bottom: 8px; margin-left: 20%;" v-px-to-vw>50%</div>
        <el-progress :percentage="50" color="#00FFB2" :show-text="false" style="width: 80%" />
        <div class="flex align-center legend" style="background: none; border: none; margin-top: 8px;" v-px-to-vw>
          <div class="legend-dot"></div>
          考勤出勤率
        </div>
      </div>
    </div>
    <div style="margin: 10px 0" v-px-to-vw>特色发展</div>
    <div class="flex align-center" style="height: 25%; flex-grow: 1; flex-shrink: 1">
      <div ref="pieChartRef" class="chart-container" style="flex: 3"></div>
      <div style="flex: 2; margin-right: 10px" v-px-to-vw>
        <div v-for="(item, index) in pieDataRight" :key="index" class="legend flex justify-between">
          <div>
            <div class="legend-dot"></div>
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 10px 0" v-px-to-vw>学习情况</div>
    <div v-if="refinitChartEData" style="position: relative; height: 25%; flex-grow: 1; flex-shrink: 1">
      <div ref="barChartRef" class="chart-container"></div>
      <select v-model="selectedType" class="custom-select" style="width: 80px; position: absolute; top: 0; right: 10px" v-px-to-vw>
        <option v-for="item in typeOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>
    </div>
    <div v-px-to-vm v-else="refinitChartEData" style="position: relative; height: 25%; flex-grow: 1; flex-shrink: 1; text-align: center; color: #ffffff; padding-top: 50px;">
      <img src="@/assets/images/profile/students/rytc_empty.png" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

import * as leaderApi from '@/api/leaders'

const typeOptions = ref([{ label: "总分", value: "1" }]);
const selectedType = ref("1");
let chooseGrade = ref(0);

const ref_class_stu_statistics = ref([]);
// 年级人数统计
const class_stu_statistics = async (isflag) => {
    isflag = isflag || '0'
    leaderApi.class_stu_statistics().then(res => {
        console.log("class_stu_statistics",res.data);
        var gradename = isflag == '0' ? '高一' : isflag == '1' ? '高二' : '高三'

        ref_class_stu_statistics.value = res.data.filter(item => item.gradename == gradename).map(item => ({
          classname : extractClassNumber(item.classname),
          gradename: item.gradename,
          stucount:item.stucount
        }));
    });
}

const gradeStyle = (gradeIndex) => {
  if (chooseGrade.value === gradeIndex) {
    return {
      color: '#00fff0',
      fontWeight: 'bold',
      transform: 'scale(1.3)',
      textShadow: '0 0 8px rgba(0, 255, 240, 0.7)',
      borderbottom: '1px solid rgba(0, 255, 240, 0.7)',
    }
  } else {
    return {
      color: '#ffffff'
    }
  }
}


// 提取班级号（更通用的方法）
const extractClassNumber = (classname) => {
  // 匹配末尾的数字+班格式
  const match = classname.match(/(\d+班)$/);
  if (match && match[1]) {
    return match[1];
  }
  // 如果没有匹配到，尝试其他格式
  const match2 = classname.match(/(\d+)班/);
  return match2 ? match2[1] + '班' : classname;
};

const tabGrade = async (isflag) => {
  chooseGrade.value = isflag;
  await class_stu_statistics(isflag);
  await class_score(isflag);
}

// 班级-每个班级最高分及平均分数据
const class_score = async (isflag) => {
  refinitChartEData.value = true;
    isflag = isflag || '0'
    var gradename = isflag == '0' ? '高一' : isflag == '1' ? '高二' : '高三'
    leaderApi.class_score(gradename).then(res => {
        if(res.data.length > 0)
        {
          refinitChartEData.value = true;
          initChartE(res.data);
        }
        else
        {
          refinitChartEData.value = false;
        }
    });
}

onMounted(() => {
  initChartA();
  initChartB();
  // initChartE();
  class_stu_statistics();
  class_score();
});
const pieDataRight = ["实中演说家", "元旦文艺汇演", "元旦文艺汇演"];
const pieData = [
  {
    name: "特色活动",
    value: 20,
  },
  {
    name: "特色学科",
    value: 10,
  },
  {
    name: "特色项目",
    value: 10,
  },
];
const icon =
  "";
let pieChartRef = ref(null);
let pieChart = ref(null);
const initChartB = () => {
  pieChart.value = echarts.init(pieChartRef.value);
  pieChart.value.setOption({
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: icon,
            width: 30,
            height: 28,
          },
          left: "39%",
          top: "center",
        },
      ],
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",

        radius: ["50%", "70%"],
        center: ["45%", "50%"],
        label: {
          formatter: "{a|{b}}",
          alignTo: "labelLine",
          distanceToLabelLine: -20,
          padding: [0, 0, 15, 0],
          rich: {
            a: {
              color: "inherit",
              fontSize: 12,
            },
          },
        },
        data: pieData,
      },
    ],
  });
};
const iconA =
  "";
let pieChartRefA = ref(null);
let pieChartA = ref(null);
const initChartA = () => {
  pieChartA.value = echarts.init(pieChartRefA.value);
  pieChartA.value.setOption({
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: iconA,
            width: 30,
            height: 24,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        startAngle: 180,
        endAngle: -180,
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        data: [
          {
            value: 50,
            name: "考勤出勤率",
          },
          {
            value: 50,
            name: "考勤出勤率",
            itemStyle: {
              normal: {
                color: "#fefefe",
              },
            },
          },
        ],
      },
    ],
  });
};
let barChartRef = ref(null);
let barChart = ref(null);
const colorList = ["#00FFF0", "#00FFB2", "#faff0d"];
const refinitChartEData = ref(false);
const initChartE = (resData) => {
  var xdata = resData.map(item => extractClassNumber(item.classname))
  var maxScroe = resData.map(item => item.max_score)
  var avgScroe = resData.map(item => item.avg_score)
  const option = {
    color: colorList,
    legend: {
      data: ["最高分", "平均分"],
      top: 0,
      textStyle: {
        fontSize: 12,
        color: function (params) {
          return params.color;
        },
      },
    },
    grid: {
      top: 30,
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      data: xdata,
      axisLine: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
        interval: 0,
         rotate: 45
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        name: "最高分",
        type: "bar",
        barWidth: 10,
        data: maxScroe,
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        },
      },
      {
        name: "平均分",
        type: "bar",
        barWidth: 10,
        data: avgScroe,
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        },
      }
    ],
  };
  barChart.value = echarts.init(barChartRef.value);
  barChart.value.setOption(option);
};
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
.left-container {
  width: 480px;
  height: calc(100% - 10px);
  color: #00ffff;
  margin-top: 10px;
  background-image: url("@/assets/images/profile/CenterBack3x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.class-con {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 8px;
  margin-top: 8px;
  position: relative;
  .class-name {
    width: 90px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    letter-spacing: 0;
    font-size: 12px;
    background: url("@/assets/images/profile/leader/class-icon.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    left: 0px;
    white-space: nowrap;
  }
}
.legend {
  color: #fff;
  border: 1px solid #00ffff;
  background: rgba(0, 255, 255, 0.2);
  padding: 6px 10px;
  border-radius: 10px;
  margin: 4px 0;
  font-size: 12px;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  background: #46deff;
}
</style>
